<template>
  <a-modal
    v-model:visible="visible"
    title="日志详情"
    :maskClosable="false"
    :style="{
      top: '0px',
      width: winWidth + 'px',
      height: 'auto',
    }"
  >
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
      :style="{
        top: '0px',
        width: '100%',
        height: winHeight + 'px',
        overflow: 'hidden',
        overflowY: 'scroll',
      }"
    >
      <a-form
        :model="formValue"
        name="basic"
        :label-col="{ span: 1 }"
        :wrapper-col="{ span: 23 }"
        autocomplete="off"
      >
        <a-form-item label="ApiName">
          <a-input v-model:value="formValue.apiName" />
        </a-form-item>
        <a-form-item label="请求方式">
          <a-input v-model:value="formValue.requestMethod" />
        </a-form-item>
        <a-form-item label="请求地址">
          <a-textarea
            v-model:value="formValue.url"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-item>
        <a-form-item label="Post参数">
          <a-textarea
            v-model:value="formValue.postData"
            :auto-size="{ minRows: 5, maxRows: 15 }"
          />
        </a-form-item>
        <a-form-item label="结果">
          <a-textarea
            v-model:value="formValue.result"
            :auto-size="{ minRows: 5, maxRows: 15 }"
          />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-input v-model:value="formValue.createdTime" />
        </a-form-item>
        <a-form-item label="耗时">
          <a-input v-model:value="formValue.usedTime" />
        </a-form-item>
      </a-form>
    </a-card>
    <template #footer>
      <a-button key="back" @click="handleCancel">返回</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineEmits,
} from "vue";
import { FormValue } from "./index";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";
import { copyObjVal, timestamp } from "@/utils/common";

export default defineComponent({
  components: {},
  setup(props, context) {
    const formRef = ref();
    const visible = ref(false);
    const loading = ref(false);
    const winWidth = ref(document.body.clientWidth);
    const winHeight = ref(document.body.clientHeight - 200);
    const now = ref();

    const defaultValues = () => {
      return {};
    };

    const formValue = ref({} as any);

    const initData = () => {
      let defaultVals = defaultValues();
      copyObjVal(defaultVals, formValue);
    };

    const display = (data: any) => {
      now.value = timestamp(13);
      visible.value = true;
      formValue.value = data;
      console.log(formValue.value);
      initData();
    };

    const handleCancel = () => {
      //formValue.content = "";
      console.log(defaultValues);
      visible.value = false;
    };

    onMounted(() => {
      window.onresize = () => {
        winWidth.value = document.body.clientWidth / 2;
        winHeight.value = document.body.clientHeight - 200;
      };
    });

    onBeforeUnmount(() => {});

    //返回数据
    return {
      visible,
      display,
      handleCancel,
      loading,
      formValue,
      winWidth,
      winHeight,
      now,
    };
  },
});
</script>
